<!DOCTYPE html>
<html lang="en" xmlns:v="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-if="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Nogu OSU官网</title>
    <link rel="stylesheet" href="../static/layer/theme/default/layer.css">
    <link rel="stylesheet" href="../static/css/normalize.min.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/my.css">
    <link rel="stylesheet" href="../static/css/home/home.css">
    <link rel="stylesheet" href="../static/css/alpha.css"/>
    <link rel="stylesheet" href="../static/font/stylesheet.css"/>
    <link rel="stylesheet" href="../static/css/flag-icons.css"/>
    <link rel="preload" href="../static/font/TorusNotched-Regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="icon" href="https://osu.ppy.sh/favicon.ico"/>

</head>
<body>

<div id="app-container" class="app-container">

    <sidebar_model @set-user="setUser"></sidebar_model>

    <div class="app-content">
        <div class="app-content-header">
            <h1 class="app-content-headerText">Nogu OSU官网</h1>
            <button class="mode-switch" title="Switch Theme">
                <svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                     stroke-width="2" width="24" height="24" viewbox="0 0 24 24">
                    <defs></defs>
                    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
                </svg>
            </button>
        </div>
        <div id="homeContent" class="app-content-actions">
            <section id="testimonials">
                <div class="testim-ovl"></div>
                <div class="testimonials-wrapper">
                    <ul class="testimonials-line">
                        <li class="customer">
                            <div class="testimonial-bubble">
                                <p>
                                    osu默认模式，在该模式下，玩家可以根据音乐的节拍轻触圆圈、按住滑块和旋转微调器。这是基于原来的伊尼斯的节奏游戏Osu！塔塔凯！温丹。osu！有自己的吉祥物皮皮，一个粉红色/黑色头发的女孩
                                </p>
                            </div>
                            <div class="cus-profile">
                                    <span class="cus-image">
                                    <img src="http://dullwolf.natapp1.cc/static/picture/std.png">
                                    </span>
                                <span class="cus-name">
                                    Std
                                    </span>
                                <span class="cus-title">
                                      标准模式
                                    </span>

                            </div>
                        </li>


                        <li class="customer">
                            <div class="testimonial-bubble">
                                <p>
                                    osu!taiko是以万代南梦宫娱乐制作的*太鼓达人*的游戏系列为基础的。通过使用键盘和鼓组，敲击一个传送带上不同颜色的圆圈，可以感受到敲击真正的太鼓的感觉。
                                </p>
                            </div>
                            <div class="cus-profile">
                                    <span class="cus-image">
                                    <img src="http://dullwolf.natapp1.cc/static/picture/taiko.png">
                                    </span>
                                <span class="cus-name">
                                    Taiko
                                    </span>
                                <span class="cus-title">
                                      太鼓模式
                                    </span>

                            </div>
                        </li>

                        <li class="customer">
                            <div class="testimonial-bubble">
                                <p>
                                    osu！mania是一种垂直滚动节奏游戏（VSRG）模式，设计为钢琴模拟器。它主要由woc2006引入和实现，基于各种传送带式节奏游戏（即舞蹈革命和Beatmania）
                                </p>
                            </div>
                            <div class="cus-profile">
                                    <span class="cus-image">
                                    <img src="http://dullwolf.natapp1.cc/static/picture/mania.png">
                                    </span>
                                <span class="cus-name">
                                    Mania
                                    </span>
                                <span class="cus-title">
                                      钢琴模式
                                    </span>

                            </div>
                        </li>

                        <li class="customer">
                            <div class="testimonial-bubble">
                                <p>
                                    接球，不同品种的果实从屏幕顶部落下，球员必须根据节拍接球。为此，他们用头顶的盘子来控制捕手，以捕捉上述水果。
                                </p>
                            </div>
                            <div class="cus-profile">
                                    <span class="cus-image">
                                    <img src="http://dullwolf.natapp1.cc/static/picture/ctb.png">
                                    </span>
                                <span class="cus-name">
                                    Catch
                                    </span>
                                <span class="cus-title">
                                      水果模式
                                    </span>

                            </div>
                        </li>

                        <span id="prev"></span>
                        <span id="next"></span>
                    </ul>
                    <!-- .testimonials-line -->
                </div>
                <!-- .testimonials-wrapper -->
            </section>

            <div class="tab" id="tab4">
                <div class="tab-nav j-tab-nav">
                    <a id="dck" href="javascript:void(0);">ctb</a>
                    <a id="dmk" href="javascript:void(0);">mania</a>
                    <a id="dtk" href="javascript:void(0);">taiko</a>
                    <a href="javascript:void(0);" class="current">std</a>
                </div>

                <div class="tab-con">
                    <div class="j-tab-con">

                        <div id="ctb" class="tab-con-item">
                            <div id="uPic_fruits" class="profile-info">
                                <img id="uImg_fruits" src="http://dullwolf.natapp1.cc/static/picture/osu/avatar-guest.png" alt="">
                                <p id="uName_fruits">玩家昵称</p>
                                <span id="uFlag_fruits" class="fi fi-cn">&nbsp;&nbsp;</span>
                                <span id="uCountry_fruits" class="country">中国</span>
                                <span class="gr">全球排名</span>
                                <span id="grNum_fruits" class="gr_num"></span>
                                <span class="cr">国内排名</span>
                                <span id="crNum_fruits" class="cr_num"></span>
                            </div>
                            <div class="profile-detail">
                                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                <div id="ec_fruits">

                                </div>
                            </div>
                        </div>

                        <div id="mania" class="tab-con-item">
                            <div id="uPic_mania" class="profile-info">
                                <img id="uImg_mania" src="http://dullwolf.natapp1.cc/static/picture/osu/avatar-guest.png" alt="">
                                <p id="uName_mania">玩家昵称</p>
                                <span id="uFlag_mania" class="fi fi-cn">&nbsp;&nbsp;</span>
                                <span id="uCountry_mania" class="country">中国</span>
                                <span class="gr">全球排名</span>
                                <span id="grNum_mania" class="gr_num"></span>
                                <span class="cr">国内排名</span>
                                <span id="crNum_mania" class="cr_num"></span>
                            </div>
                            <div class="profile-detail">
                                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                <div id="ec_mania">

                                </div>
                            </div>
                        </div>


                        <div id="taiko" class="tab-con-item">
                            <div id="uPic_taiko" class="profile-info">
                                <img id="uImg_taiko" src="http://dullwolf.natapp1.cc/static/picture/osu/avatar-guest.png" alt="">
                                <p id="uName_taiko">玩家昵称</p>
                                <span id="uFlag_taiko" class="fi fi-cn">&nbsp;&nbsp;</span>
                                <span id="uCountry_taiko" class="country">中国</span>
                                <span class="gr">全球排名</span>
                                <span id="grNum_taiko" class="gr_num"></span>
                                <span class="cr">国内排名</span>
                                <span id="crNum_taiko" class="cr_num"></span>
                            </div>
                            <div class="profile-detail">
                                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                <div id="ec_taiko">

                                </div>
                            </div>
                        </div>

                        <div id="std" class="tab-con-item">
                            <div id="uPic" class="profile-info">
                                <img id="uImg" src="http://dullwolf.natapp1.cc/static/picture/osu/avatar-guest.png" alt="">
                                <p id="uName">玩家昵称</p>
                                <!--<input id="init_ec" type="hidden" value="test">-->
                                <span id="uFlag" class="fi fi-cn">&nbsp;&nbsp;</span>
                                <span id="uCountry" class="country">中国</span>
                                <span class="gr">全球排名</span>
                                <span id="grNum" class="gr_num"></span>
                                <span class="cr">国内排名</span>
                                <span id="crNum" class="cr_num"></span>
                            </div>
                            <div class="profile-detail">
                                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                <div id="ec">

                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

        </div>


    </div>
</div>
<!--<script src="http://dullwolf.natapp1.cc/static/js/jquery.min.js"></script>-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script src="http://dullwolf.natapp1.cc/static/js/vue.min.js"></script>
<script src="http://dullwolf.natapp1.cc/static/js/axios.js"></script>
<script src="http://dullwolf.natapp1.cc/static/layer/layer.js"></script>
<!--自己封装vue组件-->
<script src="../static/js/model.js"></script>
<!--原生js必须放到最后-->
<script src="http://dullwolf.natapp1.cc/static/js/script.js"></script>
<script>
    // 给导航栏设置active
    $(function () {
        $("#sidebar-list li").eq(0).addClass("active");
    });

</script>
<script src="http://dullwolf.natapp1.cc/static/js/echarts.simple.min.js"></script>
<!--<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/4.2.1/echarts.simple.min.js"></script>-->
<script src="http://dullwolf.natapp1.cc/static/js/alpha.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dullwolf.natapp1.cc/static/js/jQuery.rTabs.js"></script>
<script type="text/javascript" src="../static/js/home/myEcharts.js"></script>
<script src="http://dullwolf.natapp1.cc/static/js/checkUser.js"></script>
<!-- 初始化 start -->
<script type="text/javascript">
    var count = 1;

    $(function () {
        $("#tab4").rTabs({
            bind: 'hover',
            animation: 'fadein'
        });
        $('#testimonials').alpha();
        resetBck();
    });

    $(document).ready(function () {
        layer.ready(function () {
            loadix = layer.load(1, {
                shade: [0.4, '#fff']
            });
        });
        if (!checkUser()) {
            layer.alert(loginErrorMsg);
            layer.close(loadix);
            return;
        }
        // 先请求接口拿到四个模式的统计数据
        $.get('/home/statistics', function (resp) {
            if (null != resp && null != resp.osu) {
                layer.close(loadix);
                window.setInterval(function () {
                    $.get('/home/bck', function (resp) {
                        if (resp) {
                            $('#testimonials').css("background", "url(" + resp + ") no-repeat center");
                            $('#testimonials').css("background-size", "contain");
                            resetBck();
                        }
                    });
                    count++;
                }, 10000);//10秒执行一次
                sessionStorage.setItem("osu", JSON.stringify(resp.osu));
                sessionStorage.setItem("fruits", JSON.stringify(resp.fruits));
                sessionStorage.setItem("taiko", JSON.stringify(resp.taiko));
                sessionStorage.setItem("mania", JSON.stringify(resp.mania));

                initEc("osu", false);
                initEc("taiko", true);
                initEc("mania", true);
                initEc("fruits", true);

            } else {
                layer.alert("获取信息失败，请重新刷页面");
                layer.close(loadix);
            }
        });

        $("#dck").hover(function () {
            initEc("fruits", false);
        })

        $("#dmk").hover(function () {
            initEc("fruits", false);
        })

        $("#dtk").hover(function () {
            initEc("fruits", false);
        })
    });

    function resetBck() {
        var testimonialHeights = $('.testimonial-bubble').map(function () {
            return $(this).outerHeight(true);
        }).get();
        var maxHeight = Math.max.apply(null, testimonialHeights);
        $('.testimonials-wrapper').css('padding-top', maxHeight + 250);
        $('#testimonials').css("height", (maxHeight + 550) + "px");
        $('#tab4').css("top", (maxHeight + 650) + "px");
    }

    function initEc(m, flag) {
        let suffix = "";
        switch (m) {
            case "osu":
                suffix = "";
                break;
            case "taiko":
                if (flag) {
                    suffix = "_taiko";
                } else {
                    suffix = "";
                }
                break;
            case "mania":
                if (flag) {
                    suffix = "_mania";
                } else {
                    suffix = "";
                }
                break;
            case "fruits":
                if (flag) {
                    m = "osu";
                    suffix = "";
                } else {
                    m = "fruits";
                    suffix = "_fruits";
                }
                break;
        }
        let osuJson = sessionStorage.getItem(m);
        let osuObj = JSON.parse(osuJson);
        let mode = osuObj.rankHistory.mode;
        let data = osuObj.rankHistory.data;
        let bakData = data;
        bakData.sort(function (a, b) {
            return a - b;
        });
        let min = bakData[0];
        let max = bakData[bakData.length - 1];
        switch (m) {
            case "osu":
                option.series[0].mode = mode;
                option.series[0].data = data;
                option.yAxis.min = min;
                option.yAxis.max = max;
                let myChart = echarts.init(document.getElementById('ec' + suffix));
                myChart.setOption(option);
                break;
            case "taiko":
                option2.series[0].mode = mode;
                option2.series[0].data = data;
                option2.yAxis.min = min;
                option2.yAxis.max = max;
                let myChart2 = echarts.init(document.getElementById('ec' + suffix));
                myChart2.setOption(option2);
                break;
            case "mania":
                option3.series[0].mode = mode;
                option3.series[0].data = data;
                option3.yAxis.min = min;
                option3.yAxis.max = max;
                let myChart3 = echarts.init(document.getElementById('ec' + suffix));
                myChart3.setOption(option3);
                break;
            case "fruits":
                option4.series[0].mode = mode;
                option4.series[0].data = data;
                option4.yAxis.min = min;
                option4.yAxis.max = max;
                let myChart4 = echarts.init(document.getElementById('ec' + suffix));
                myChart4.setOption(option4);
                break;
        }
        if (flag && m === 'osu') {
            //m = 'fruits';
            suffix = '_fruits';
            osuJson = sessionStorage.getItem(m);
            osuObj = JSON.parse(osuJson);
            $("#uName" + suffix).html(osuObj.username);
            $("#uFlag" + suffix).removeClass("fi-cn");
            $("#uFlag" + suffix).addClass("fi-" + osuObj.country_code.toLowerCase());
            $("#uCountry" + suffix).html(osuObj.country.name);
            if (osuObj.statistics.global_rank) {
                $("#grNum" + suffix).html("#" + osuObj.statistics.global_rank);
            } else {
                $("#grNum" + suffix).html("需要打谱重新激活");
            }
            if (osuObj.statistics.country_rank) {
                $("#crNum" + suffix).html("#" + osuObj.statistics.country_rank);
            } else {
                $("#crNum" + suffix).html("");
            }
            $("#uImg" + suffix).attr("src", osuObj.avatar_url);
            $('#uPic' + suffix).attr("style", "background:url(" + osuObj.cover_url + ") no-repeat center;background-size:cover");

        } else {
            $("#uName" + suffix).html(osuObj.username);
            $("#uFlag" + suffix).removeClass("fi-cn");
            $("#uFlag" + suffix).addClass("fi-" + osuObj.country_code.toLowerCase());
            $("#uCountry" + suffix).html(osuObj.country.name);
            if (osuObj.statistics.global_rank) {
                $("#grNum" + suffix).html("#" + osuObj.statistics.global_rank);
            } else {
                $("#grNum" + suffix).html("需要打谱重新激活");
            }
            if (osuObj.statistics.country_rank) {
                $("#crNum" + suffix).html("#" + osuObj.statistics.country_rank);
            } else {
                $("#crNum" + suffix).html("");
            }
            $("#uImg" + suffix).attr("src", osuObj.avatar_url);
            $('#uPic' + suffix).attr("style", "background:url(" + osuObj.cover_url + ") no-repeat center;background-size:cover");
        }
    }
</script>


</body>
</html>
